<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="../static/images/elm.ico" type="image/x-icon"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>饿了么数据分析商家</title>
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
      li a.dropdown {
        background-color: #028dd6;
      }
      li a.dropdown:hover {
        background-color: #2db0f5;
      }
      p.p1 {
          color: black;
          font-size: 17px;
          font-weight: bold;
          overflow:hidden;
          white-space:nowrap; /*不允许换行*/
          text-overflow:ellipsis;/*超出部分省略号显示*/
      }
      p.p2 {
          color: gray;
          font-size: 15px;
          font-weight: bold;
          text-align: center;
      }
      .l-img-div{
          width:100%;
          height:0;
          position: relative;
          padding-bottom: 100%
          }
        .l-img-div img{
            width:100%;
            height:100%;
            position: absolute;
        }
    </style>
</head>
<body >
    <!--头头头-->
    <div class="container" style="font-size: 12px;height: 30px">
        <div class="pull-left" style="padding-top: 7px">您好，欢迎您光临 饿了么商家分析系统（FJNU）指定出品：Python</div>
        <div class="pull-right" style="padding-top: 8px">
          <ul class="list-inline" style="padding-right:  3px;" >
            <li style="padding: 0 1px"><a href="{{ url_for('index.index_page') }}" style="color: black" >网站首页</a></li> |
            <li style="padding: 0 1px"><a href="#" style="color: black" >收藏我们</a></li> |
            <li style="padding: 0 1px">Author:<span style="color:rgb(0, 129, 204);">FJNU 数学与信息学院 软件工程 Python小队</span></li>
          </ul>
        </div>
    </div>
    <!--导航栏-->
      <nav class="navbar "  style="background-color:#028dd6 ; border:none; border-radius: 0px ;">
        <div class="container">
            <div class="navbar-header ">
                <a  href="{{ url_for('index.index_page') }}" style="float: left; " ><img src="../static/images/elm.jpg"  height="78px" ></a>
            </div>
            <ul class="nav navbar-nav " >
                <li style=" font-size:16px; width: 110px ">
                    <a class="dropdown" style="padding: 29px 0 0 38px;height:80px; color: white;" href="{{ url_for('index.index_page') }}">首页</a>
                </li>
                <li style=" font-size:16px; width: 110px ">
                </li>
                <li style=" font-size:16px; width: 110px ">
                </li>
            </ul>

                <form class="navbar-form navbar-left" role="search" style="margin-top: 2%;">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">提交</button>
                </form>

            <div class="navbar-right " >
                <a class="navbar-brand" style="text-align: center;color:rgb(53, 52, 52);"><img src="../static/images/peopel.png"  height="100%" style="float: left;" >手机号<br>{{ info.telephone }}</a>
            </div>
        </div>
      </nav>

      <!--当前位置-->
      <div class="container" style="width: 1170px;height: 800px;">
        <div>
            <ol class="breadcrumb" style="margin: 0;padding: 0;">
                当前位置：    {{ info.address }} <li><a href="{{ url_for('index.index_page') }}">[切换地址]</a></li>
            </ol>
        </div>
        <hr>
    <!--商家-->
      {% for restaurant in res.restaurants  %}
      <div class="col-md-3">
          <div class="col-md-6">
            <div class="l-img-div">
                <a href="{{ restaurant.restaurant_image }}" target="_blank">
                    <img src="{{ restaurant.restaurant_image }}" alt="{{ restaurant.restaurant_name }}" >
                </a>
            </div>
            <p class="p2">{{ restaurant.order_lead_time }}分钟</p>
          </div>
          <div class="col-md-6">
                <a href="/restaurant_detail?restaurant_id={{ restaurant.restaurant_id }}"><p class="p1">{{ restaurant.restaurant_name }}</p></a>
                <div class="num" >月售：{{ restaurant.recent_order_num }}</div>
                <span class="rating" >评分：{{ restaurant.rating }}</span>
                <br><br>
                <p class="p2" style="text-align: left;">{{ restaurant.float_minimum_order_amount }}元起送</p>
          </div>
      </div>
      {% endfor %}
        <div class="pages">
            <div class="plist" style="margin: 0 ;float: right;">
                <ul class="pagination"></ul>
            </div>
        </div>
    </div>

    <div class="container-full-about" style="background-color: #028dd6;text-align: center;">
        <br>
        <p>copyright:FJNU 数学与信息学院 软件工程 Python小队</p>
        <br>
    </div>
    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <script>
        let has_next = "{{ res.has_next }}";
        // 改变url某个参数的值
        function changeURLArg(url, arg, arg_val){
            let pattern=arg+'=([^&]*)';
            let replaceText=arg+'='+arg_val;
            if(url.match(pattern)){
                let tmp='/('+ arg+'=)([^&]*)/gi';
                tmp=url.replace(eval(tmp),replaceText);
                return tmp;
            }else{
                if(url.match('[\?]')){
                    return url+'&'+replaceText;
                }else{
                    return url+'?'+replaceText;
                }
            }
        }
        //获得当前搜索参数值
        function getParameter(name) {
            let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
            let r = location.search.substr(1).match(reg);
            if (r != null)
                return (r[2]);
            return null;
        }
        // 页码html生成
        function render_page(current_page=1) {
            let page_block = $(".pagination");
            current_page = parseInt(current_page);
            if(has_next==="True"){
                //还有下一页
                if(current_page === 1){
                    let $li_1 = $("<li><span>上一页</span></li>");
                    $li_1.addClass("disabled");
                    let $li_2 = $("<li><span>1</span></li>");
                    $li_2.addClass("active");
                    let $li_3 = $("<li><a>2</a></li>");
                    $li_3.children("a").attr("href", changeURLArg(window.location.href,"page",current_page+1));
                    let $li_4 = $("<li><a>3</a></li>");
                    $li_4.children("a").attr("href", changeURLArg(window.location.href,"page",current_page+2));
                    let $li_5 = $("<li><a>下一页</a></li>");
                    $li_5.children("a").attr("href", changeURLArg(window.location.href,"page",current_page+1));
                    page_block.append($li_1,$li_2,$li_3,$li_4,$li_5);
                }else {
                    let $li_1 = $("<li><a>上一页</a></li>");
                    $li_1.children("a").attr("href", changeURLArg(window.location.href,"page",current_page-1));
                    let $li_2 = $("<li><a>" + (current_page-1) + "</a></li>");
                    $li_2.children("a").attr("href", changeURLArg(window.location.href,"page",current_page-1));
                    let $li_3 = $("<li><span>" + current_page + "</span></li>");
                    $li_3.addClass("active");
                    let $li_4 = $("<li><a>" + (current_page+1) + "</a></li>");
                    $li_4.children("a").attr("href", changeURLArg(window.location.href,"page",current_page+1));
                    let $li_5 = $("<li><a>下一页</a></li>");
                    $li_5.children("a").attr("href", changeURLArg(window.location.href,"page",current_page+1));
                    page_block.append($li_1,$li_2,$li_3,$li_4,$li_5);
                }
            }else{
                let $li_1 = $("<li><a>上一页</a></li>");
                $li_1.children("a").attr("href", changeURLArg(window.location.href,"page",current_page-1));
                let $li_2 = $("<li><a>" + (current_page-2) + "</a></li>");
                $li_2.children("a").attr("href", changeURLArg(window.location.href,"page",current_page-2));
                let $li_3 = $("<li><span>" + (current_page-1) + "</span></li>");
                $li_3.children("a").attr("href", changeURLArg(window.location.href,"page",current_page-1));
                let $li_4 = $("<li><a>" + current_page + "</a></li>");
                $li_4.addClass("active");
                let $li_5 = $("<li><span>下一页</span></li>");
                $li_5.addClass("disabled");
                page_block.append($li_1,$li_2,$li_3,$li_4,$li_5);
            }
        }
        console.log(getParameter("page"))
        render_page(getParameter("page"));
    </script>
</body>
</html>